<template>
  <thead>
    <tr>
      <th class="table__cell-index">
        <div>
          <input v-if="selectable" type="checkbox" :checked="isAllSelected" :indeterminate="isIndeterminate" @change="handleSelectAll" />
          <span v-else>序号</span>
        </div>
      </th>
      <!-- 表头部分 -->
      <th
        v-for="(column, colIndex) in columns"
        :key="column.prop"
        v-show="column.visible"
        class="table__header"
        :class="{
          'table__fixed-column-left': column.fixed === 'left',
          'table__fixed-column-right': column.fixed === 'right'
        }"
        :style="getHeaderFixedStyle(column, colIndex)"
      >
        <span class="table__header-content">{{ column.label }}</span>
        <div class="table__resizer" v-show="resize" @mousedown="($event) => onResize($event, column, colIndex)"></div>
      </th>
      <!-- 操作列 -->
      <th v-if="editable" class="table__header table__fixed-column-right table__action-column">
        <span class="table__header-content">操作</span>
        <div class="table__resizer" v-show="resize" @mousedown="onActionColumnResize"></div>
      </th>
    </tr>
  </thead>
</template>

<script setup lang="ts">
import type { Column } from '../type';

const props = defineProps<{
  columns: Column[];
  selectable?: boolean;
  editable?: boolean;
  resize?: boolean;
  isAllSelected: boolean;
  isIndeterminate: boolean;
  getHeaderFixedStyle: (column: Column, index: number) => any;
}>();

const emit = defineEmits<{
  (e: 'select-all', event: Event): void;
  (e: 'resize', event: MouseEvent, column: Column, colIndex: number): void;
  (e: 'action-column-resize', event: MouseEvent): void;
}>();

const handleSelectAll = (event: Event) => {
  emit('select-all', event);
};

const onResize = (event: MouseEvent, column: Column, colIndex: number) => {
  emit('resize', event, column, colIndex);
};

const onActionColumnResize = (event: MouseEvent) => {
  emit('action-column-resize', event);
};
</script>

<style scoped lang="less">
.table__header-content {
  font-size: 14px;
}
</style>
